<template>
  <div class="mustseeitem" ref="nihao" v-if="item.children">
    <div class="head">
      <div class="usermsg">
        <img
          class="headicon"
          :src="item.children[0].model.resource.creator.avatar"
          alt=""
        />
        <span class="username">
            {{item.children[0].model.resource.creator.username}}</span>
      </div>
      <div class="right">
        <i class="iconfont icon-androidgengduo"></i>
      </div>
    </div>

    <p class="title">{{ item.children[0].model.resource.title }}</p>
    <div
      class="video"
      v-if="!autoPlay"
    >
    <img @click="onClick(item.children[0].model.resource.url)" :src="item.children[0].model.resource.cover" alt="">
    </div>
    <div class="foot">
      <span @click="onClick(item.children[0].model.resource.url)">立即查看</span>
      <span>推广</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
    play: String,
  },
  data() {
    return {
      vurl: null,
      autoPlay: false,
      timer: null,
      show:true,
      viewHeight:null,
    };
  },
  created: function () {
    // this.axios
    //   .get(
    //     "https://apis.netstart.cn/xpc/article/" +
    //       this.item.children[0].model.resource.id
    //   )
    //   .then((res) => {
    //     var k = res.data.data.video.content.progressive;
    //     this.vurl = k[k.length - 1].url;
    //     console.log(this.vurl);
    //   });
      this.viewHeight = window.innerHeight
  },
  mounted() {
    // window.addEventListener("scroll", this.handleScrollx, true);
    
  },
  methods: {
    onClick(link){
      console.log(link);
      let k = link.replace('newstudios://app.xinpianchang.com/web?url=https%3A%2F%2Fwww.xinpianchang.com%2F','')
      k = k.split('%')
      console.log(k[0]);
      this.$router.push({path:'/eartical',query:{id:k[0]}})
    }
    // handleScrollx() {
    //   this.$nextTick(() => {
    //     if (this.timer) {
    //       clearTimeout(this.timer);
    //     }
    //     this.timer = setTimeout(() => {
    //       var top = this.$refs.nihao.getBoundingClientRect().top;
    //       if(top>=0&&top<this.viewHeight/2-100){
    //         this.autoPlay=true
    //         this.show = true
    //       }else if(top>this.viewHeight){
    //         this.autoPlay=false;
    //         this.show = false
    //       }else{
    //         this.autoPlay=false;
    //         this.show = true
    //       }
    //     }, 1000);
    //   });
    // },
  },
};
</script>

<style lang="less" scoped>
.mustseeitem {
  width: 100%;
  min-height: 300px;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px 0;
  .head {
    display: flex;
    .usermsg {
      display: flex;
      padding: 0px 10px;
      align-items: center;
      flex: 1;
      .headicon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        vertical-align: middle;
      }
      .username {
        color: #000;
        font-weight: 600;
        margin: 0 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px
      }
      .peopcount {
        color: #aaa;
        .peopcoures {
          color: #000;
          font-weight: 600px;
        }
      }
    }
    .right {
      text-align: right;
      display: flex;
      align-items: center;
      margin-right: 10px;
      justify-content: space-between;
      .guanzhu {
        color: #eb4f4b;
      }
      i {
        color: #cacac9;
        font-size: 20px;
      }
    }
  }

  .title {
    font-size: 18px;
    color: #000;
    font-weight: 600;
    margin: 10px 10px;
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .video {
    width: 100%;
    min-height: 64%;
    position: relative;
    filter: blur(0px) brightness(0.9);
  }
  .foot {
    display: flex;
    justify-content: space-between;
    color: #7c7c7c;
    margin-top: 10px;
    padding: 0 10px;
    font-size: 14px;
  }
}
</style>